<filter-sidebar no-text no-hosts></filter-sidebar>
<div class="hk-content-sidebar" ng-class="{ 'hk-content-sidebar-expanded': hideSidebar }">
  <div class="card-pf dt-card" ng-class="{ 'no-sidebar': hideSidebar }">
    <div class="card-pf-body">
      <form class="form-horizontal form-inline row">
        <div class="form-group col-md-5">
          <label class="control-label col-md-3" for="rootnode">Initial Endpoint </label>
          <div class="col-md-9">
            <select pf-select="{noneSelectedText: 'No Nodes Available' }" class="form-control" id="rootnode"
              ng-options="option for option in topLevel" ng-disabled="topLevel.length === 0" ng-model="rootNode"
              ng-change="filterByTopLevel(rootNode)">
              <option value="" ng-if="topLevel.length" disabled>Select a Node</option>
            </select>
          </div>
        </div>
        <div class="form-group col-md-3">
          <button class="btn btn-default" ng-click="showInstanceDetails()" ng-disabled="instanceCount === 0">Show {{ instanceCount }} Instance(s) Details</button>
        </div>
        <div class="form-group pull-right">
          <button class="btn btn-default" ng-click="resetZoom()"><i class="fa fa-dot-circle-o"></i> Reset Zoom</button>
        </div>
      </form>
      <hr/>
      <div class="graph dt" dagre-d3 nodes="filteredNodes">
        <svg><g/></svg>
      </div>
    </div>
  </div>
</div>
